<template>
  <el-descriptions title="信息简介" border>
    <el-descriptions-item label="姓名">{{
      elderInfo.name
    }}</el-descriptions-item>
    <el-descriptions-item label="性别">{{
      elderInfo.gender
    }}</el-descriptions-item>
    <el-descriptions-item label="年龄">{{
      elderInfo.age
    }}</el-descriptions-item>
    <el-descriptions-item label="电话号码">{{
      elderInfo.phone
    }}</el-descriptions-item>
    <el-descriptions-item label="身份证号">{{
      elderInfo.idCard
    }}</el-descriptions-item>
    <el-descriptions-item label="登记时间">{{
      dayjs(elderInfo.createdAt).format("YYYY-MM-DD")
    }}</el-descriptions-item>
    <el-descriptions-item label="紧急联系人">{{
      elderInfo.emergencyContact
    }}</el-descriptions-item>
    <el-descriptions-item label="联系人手机号">{{
      elderInfo.emergencyPhone
    }}</el-descriptions-item>
  </el-descriptions>
  <div class="space"></div>
  <div>
    <div
      class="el-descriptions__title"
      style="margin-bottom: 16px; display: flex"
    >
      入住记录
      <div class="btns">
        <el-button type="primary" @click="dialogVisible = true"
          >办理入住</el-button
        >
      </div>
    </div>

    <el-table
      :data="tableData"
      border
      :header-row-style="{
        color: '#000',
        fontWeight: '700',
        fontSize: '14px',
      }"
    >
      <el-table-column prop="checkinDate" label="入住时间">
        <template #default="scope">
          {{ dayjs(scope.row.checkinDate).format("YYYY-MM-DD") }}
        </template>
      </el-table-column>
      <el-table-column prop="checkoutDate" label="结束时间">
        <template #default="scope">
          {{ dayjs(scope.row.checkoutDate).format("YYYY-MM-DD") }}
        </template>
      </el-table-column>
      <el-table-column prop="roomNumber" label="房间号"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="danger" @click="handleDelete(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div class="space"></div>
  <div>
    <div
      class="el-descriptions__title"
      style="margin-bottom: 16px; display: flex"
    >
      家属信息
      <div class="btns">
        <el-button type="primary" @click="familyDialogVisible = true"
          >登记家属信息</el-button
        >
      </div>
    </div>

    <el-table
      :data="familyList"
      border
      :header-row-style="{
        color: '#000',
        fontWeight: '700',
        fontSize: '14px',
      }"
    >
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column
        prop="relationship"
        label="与客户的关系"
      ></el-table-column>
      <el-table-column prop="phone" label="联系电话"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-space style="width: 100%; justify-content: center">
            <el-button
              plain
              type="danger"
              @click="handleFamilyDelete(scope.row.id)"
              >删除</el-button
            >
          </el-space>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div class="space"></div>
  <el-descriptions title="健康档案" border>
    <template #extra
      ><el-button
        type="primary"
        style="float: right"
        @click="healthVisible = true"
        >编辑</el-button
      >
    </template>
    <el-descriptions-item label="病史">{{
      healthForm.medicalHistory
    }}</el-descriptions-item>
    <el-descriptions-item label="过敏史">{{
      healthForm.allergy
    }}</el-descriptions-item>
    <el-descriptions-item label="用药">{{
      healthForm.medication
    }}</el-descriptions-item>
  </el-descriptions>
  <el-dialog title="添加入住" v-model="dialogVisible">
    <el-form label-width="120px">
      <el-form-item label="入住时间">
        <el-date-picker v-model="form.checkinDate" type="date" />
      </el-form-item>
      <el-form-item label="结束时间">
        <el-date-picker v-model="form.checkoutDate" type="date" />
      </el-form-item>
      <el-form-item label="房间号">
        <el-input v-model="form.roomNumber" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="submit">确定</el-button>
      <el-button @click="dialogVisible = false">取消</el-button>
    </template>
  </el-dialog>
  <el-dialog title="添加家属信息" v-model="familyDialogVisible">
    <el-form label-width="120px">
      <el-form-item label="姓名">
        <el-input v-model="familyForm.name" />
      </el-form-item>
      <el-form-item label="关系">
        <el-input v-model="familyForm.relationship" />
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="familyForm.phone" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="familySubmit">确定</el-button>
      <el-button @click="familyDialogVisible = false">取消</el-button>
    </template>
  </el-dialog>
  <el-dialog title="健康档案" v-model="healthVisible">
    <el-form label-width="120px">
      <el-form-item label="病史">
        <el-input v-model="healthForm.medicalHistory" />
      </el-form-item>
      <el-form-item label="过敏">
        <el-input v-model="healthForm.allergy" />
      </el-form-item>
      <el-form-item label="用药">
        <el-input v-model="healthForm.medication" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="healthSubmit">确定</el-button>
      <el-button
        @click="
          healthVisible = false;
          getData();
        "
        >取消</el-button
      >
    </template>
  </el-dialog>
</template>
<script setup>
import { ref } from "vue";
import dayjs from "dayjs";
import { useRoute } from "vue-router";
import {
  getCheckinCheckoutById,
  addCheckinCheckout,
  deleteCheckinCheckout,
  getFamilyByElder,
  addFamily,
  deleteFamily,
  getHealthRecordById,
  createOrUpdateHealthRecord,
  getElderById,
} from "@/api/request";
import { ElMessage } from "element-plus";
const tableData = ref([]);
const dialogVisible = ref(false);
const familyDialogVisible = ref(false);
const healthVisible = ref(false);
const familyList = ref([]);

const route = useRoute();
const elderId = route.params.id;

const form = ref({
  checkinDate: "",
  checkoutDate: "",
  roomNumber: "",
});
const familyForm = ref({
  name: "",
  relationship: "",
  phone: "",
});

const healthForm = ref({
  id: "",
  elderId: elderId,
  medicalHistory: "",
  allergy: "",
  medication: "",
});
const elderInfo = ref({});

const getData = async () => {
  let data = await getCheckinCheckoutById(elderId);
  tableData.value = data.data;
  data = await getElderById(elderId);
  elderInfo.value = data.data;
  data = await getFamilyByElder(elderId);
  familyList.value = data.data;
  data = await getHealthRecordById(elderId);
  if (data.data) {
    healthForm.value = data.data;
  }
};
const submit = async () => {
  if (!form.value.checkinDate || !form.value.checkoutDate) {
    ElMessage.error("请选择入住时间和结束时间");
    return;
  }
  if (dayjs(form.value.checkinDate).isAfter(form.value.checkoutDate)) {
    ElMessage.error("入住时间不能晚于结束时间");
    return;
  }

  await addCheckinCheckout({
    ...form.value,
    elderId: elderId,
  });
  await getData();
  dialogVisible.value = false;
};
const familySubmit = async () => {
  await addFamily({
    ...familyForm.value,
    elderId: elderId,
  });
  await getData();
  familyDialogVisible.value = false;
  ElMessage.success("添加成功");
};
const handleDelete = async (id) => {
  await deleteCheckinCheckout(id);
  await getData();
  ElMessage.success("删除成功");
};
const handleFamilyDelete = async (id) => {
  await deleteFamily(id);
  await getData();
  ElMessage.success("删除成功");
};
const healthSubmit = async () => {
  await createOrUpdateHealthRecord(healthForm.value);
  await getData();
  healthVisible.value = false;
  ElMessage.success("更新成功");
};
getData();
</script>
<style scoped>
.space {
  height: 50px;
}
.btns {
  margin-left: auto;
}
</style>
